<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>JSON在线解析及格式化验证</title>
    <base href="/pages/json/" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="HandheldFriendly" content="True"/>
    <meta name="MobileOptimized" content="720"/>
    <meta http-equiv="Cache-Control" content="max-age=3600"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all"/>
    <meta name="author" content="i.fe80.cn"/>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/base.css" rel="stylesheet">
</head>
<body style="overflow:hidden;">
<header class="header">
    <div class="row-fluid">
        <div class="col-md-8 header-nav-list" style="position:relative;padding-top: 8px;">
            <div class="navi">
                <a href="/" data-placement="bottom">首页</a>
            </div>
        </div>
        <nav class="col-md-4" style="padding-right: 20px; " align="right">
            <a class="logo" href="/">
                fe80.<span style="color:#af33ce;">com.</span><span style="color:#006621;">cn</span></a>
            <a class="custom-btn active" href="/" data-placement="bottom">在线解析</a>
        </nav>
        <br style="clear:both;"/>
    </div>
</header>

<main class="row-fluid editor-con">
    <div class="col-md-5" style="padding:0px;height:100%;">
        <textarea id="json-src" placeholder="在此输入json字符串或XML字符串..." class="form-control common-font-size"
                  style="height:100%;padding:10px 10px 10px 30px;border:0;border-right:solid 1px #E5EBEE;border-bottom:solid 1px #eee;border-radius:0;resize: none; outline:none;"></textarea>
    </div>
    <div id="dragEle"></div>
    <div class="col-md-7" style="padding:0;position:relative;height:100%;">
        <div class="tool" style="position:absolute;">
            <a href="#" class="tip zip" title="压缩" data-placement="bottom"><i class="fa fa-database"></i></a>
            <a href="#" class="tip xml" title="转XML" data-placement="bottom"><i class="fa fa-file-excel-o"></i></a>
            <a href="#" class="tip shown" title="显示行号" data-placement="bottom"><i
                    class="glyphicon glyphicon-sort-by-order"></i></a>
            <a href="#" class="tip clear" title="清空" data-placement="bottom"><i class="fa fa-trash"></i></a>
            <a href="#" class="tip save" title="保存" data-placement="bottom"><i class="fa fa-download"></i></a>
            <a href="#" class="tip copy" title="复制" data-clipboard-target="#json-target" data-placement="bottom"><i
                    class="fa fa-copy"></i></a>
            <a href="#" class="tip compress" title="折叠" data-placement="bottom"><i class="fa fa-compress"></i></a>
            <a href="#" class="tip share" title="分享" data-placement="bottom"><i class="fa fa-share-alt-square"></i></a>
            <label style="cursor: pointer">
                <input type="checkbox" name="cancelZY" id="cancelZY" style="margin-top: 0;position: relative;top: 2px"> 保留转义
            </label>
        </div>
        <div id="right-box" class="common-font-size"
             style="width:100%;height: 100%;min-height:520px;border:solid 1px #f6f6f6;border-radius:0;resize: none;overflow-y:scroll; outline:none;position:relative;padding-top:40px;">
            <p class="editor-tip">可点击key和value值进行编辑</p>
            <div id="hidden-message-box"
                 class="alert alert-danger alert-dismissible" role="alert"
                 style="display:none;margin-bottom:0;padding:10px 2vw;font-size: calc(var(--target) + 4px);">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <p><i class="fa fa-bell" aria-hidden="true"></i>
                    提示：
                    <span id="hidden-message">
                      默认警告
                  </span>

                </p>
            </div>
            <div id="line-num"
                 style="background-color:#fafafa;padding:0px 8px;float:left;border-right:dashed 1px #E5EBEE;display:none;z-index:-1;color:#999;position:absolute;text-align:center;over-flow:hidden;">
                <div>0</div>
            </div>
            <div class="ro" id="json-target" style="padding:0px 25px;white-space: pre-line;word-wrap:break-word;">
            </div>
        </div>
    </div>
    <br style="clear:both;"/>
</main>
<link href="css/jquery.numberedtextarea.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.message.js"></script>
<script src="js/bignumber.min.js"></script>
<script src="js/jquery.json.js?20200628"></script>
<script src="js/jquery.xml2json.js"></script>
<script src="js/jquery.json2xml.js"></script>
<script src="js/json2.js"></script>
<script src="js/jsonlint.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/FileSaver.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.numberedtextarea.js"></script>
<script src="js/drag.js?20200628"></script>
<script type="text/javascript">
    $('textarea').numberedtextarea();
    var current_json = '';
    var current_json_str = '';
    var xml_flag = false;
    var zip_flag = false;
    var shown_flag = false;
    var compress_flag = false;
    var isXml = false;
    $('.tip').tooltip();

    function init() {
        xml_flag = false;
        zip_flag = false;
        shown_flag = false;
        compress_flag = false;
        isXml = false;
        renderLine();
        $('.xml').attr('style', 'color:#999;');
        $('.zip').attr('style', 'color:#999;');

    }
    $('#cancelZY').click(function(){
        init();
        var content = $.trim($('#json-src').val());
        var result = '';
        if (content != '') {
            //如果是xml,那么转换为json
            if (content.substr(0, 1) === '<' && content.substr(-1, 1) === '>') {
                isXml = true;
                try {
                    var json_obj = $.xml2json(content);
                    content = JSON.stringify(json_obj);
                } catch (e) {
                    result = '解析错误：<span style="color: #f1592a;font-weight:bold;">' + e.message + '</span>';
                    current_json_str = result;
                    $('#json-target').html(result);
                    return false;
                }

            }
            try {
                var hasZY = $('#cancelZY').prop('checked');
                if (hasZY) {
                    content = content.replace(/\\/g, '\\\\');
                    content = content.replace(/\\"/g, '\\\\"');
                }

                current_json = jsonlint.parse(content);
                current_json_str = JSON.stringify(current_json);
                //current_json = JSON.parse(content);
                result = new JSONFormat(content, 4).toString();
            } catch (e) {
                result = '<span style="color: #f1592a;font-weight:bold;">' + e + '</span>';
                current_json_str = result;
            }

            $('#json-target').html(result);
        } else {
            $('#json-target').html('');
        }
    });
    $('#json-src').keyup(function () {
        init();
        var content = $.trim($(this).val());
        var result = '';
        if (content != '') {
            //如果是xml,那么转换为json
            if (content.substr(0, 1) === '<' && content.substr(-1, 1) === '>') {
                try {
                    var json_obj = $.xml2json(content);
                    content = JSON.stringify(json_obj);
                } catch (e) {
                    result = '解析错误：<span style="color: #f1592a;font-weight:bold;">' + e.message + '</span>';
                    current_json_str = result;
                    $('#json-target').html(result);
                    return false;
                }

            }
            try {
                var hasZY = $('#cancelZY').prop('checked');
                if (hasZY) {
                    content = content.replace(/\\/g, '\\\\');
                    content = content.replace(/\\"/g, '\\\\"');
                }
                current_json = jsonlint.parse(content);
                current_json_str = JSON.stringify(current_json);
                //current_json = JSON.parse(content);
                result = new JSONFormat(content, 4).toString();
            } catch (e) {
                result = '<span style="color: #f1592a;font-weight:bold;">' + e + '</span>';
                current_json_str = result;
            }

            $('#json-target').html(result);
        } else {
            $('#json-target').html('');
        }

    });
    $('#right-box').keyup(function(){
        var text = $('#json-target').html().replace(/<br\/>/g, "\n").replace(/<br>/g, "\n").replace(/<[^>]+>/g,"").replace(/&nbsp;/ig, " ").replace(/Object{...}/ig, "").replace(/Array\[[0-9]+\]/ig, "");
        if (isXml) {
            $('#json-src').val($.json2xml(JSON.parse(text)))
        } else {
            $('#json-src').val(text)
        }
    });
    $('.xml').click(function () {
        if (xml_flag) {
            $('#json-src').keyup();
        } else {
            var result = $.json2xml(current_json);
            $('#json-target').html('<textarea style="width:100%;position:absolute;height: 80vh;min-height:480px;border:0;resize:none;">' + result + '</textarea>');
            xml_flag = true;
            $(this).attr('style', 'color:#15b374;');
        }

    });
    $('.shown').click(function () {
        if (!shown_flag) {
            renderLine();
            $('#line-num').show();
            $('.numberedtextarea-line-numbers').show();
            shown_flag = true;
            $(this).attr('style', 'color:#15b374;');
        } else {
            $('#line-num').hide();
            $('.numberedtextarea-line-numbers').hide();
            shown_flag = false;
            $(this).attr('style', 'color:#999;');
        }
    });

    function renderLine() {
        var line_num = $('#json-target').height() / 20;
        $('#line-num').html("");
        var line_num_html = "";
        for (var i = 1; i < line_num + 1; i++) {
            line_num_html += "<div>" + i + "<div>";
        }
        $('#line-num').html(line_num_html);
    }

    $('.zip').click(function () {
        if (zip_flag) {
            $('#json-src').keyup();
        } else {
            //$('#json-target').html(current_json_str.replace(/</g,"&lt;").replace(/>/g,"&gt;"));
            $('#json-target').html("<xmp>" + current_json_str + "</xmp>");
            zip_flag = true;
            $(this).attr('style', 'color:#15b374;');
        }

    });
    $('.compress').click(function () {
        if (!compress_flag) {
            $(this).attr('style', 'color:#15b374;');
            //$(this).attr('title','取消折叠').tooltip('fixTitle').tooltip('show');
            $($(".fa-minus-square-o").toArray().reverse()).click();
            compress_flag = true;
        } else {
            while ($(".fa-plus-square-o").length > 0) {
                $(".fa-plus-square-o").click();
            }
            compress_flag = false;
            $(this).attr('style', 'color:#555;');
            $(this).attr('title', '折叠').tooltip('fixTitle').tooltip('show');
        }
    });
    $('.clear').click(function () {
        $('#json-src').val('');
        $('#json-target').html('');
    });
    $('.share').click(function () {
        $('#hidden-message-box').hide();
        try {
            var jqxhr = $.post("/shares/", {"content": current_json_str}, function (data) {
                var k = data;
            })
                .success(function (data) {
                    window.location.href = "share.html?k=" + data;
                })
                .error(function (data) {
                    $('#hidden-message-box').hide();
                    if (data.status <= 400 && data.status > 200) {
                        $('#hidden-message').html(data.responseText);
                    } else if (data.status > 400) {
                        $('#hidden-message').html("服务器升级中...此功能暂不可用.");
                    }
                    $('#hidden-message-box').show();
                }).done(function (data) {
                    $('#hidden-message-box').hide();
                    if (data.responseText != undefined) {
                        $('#hidden-message').html(data.responseText);
                    } else {
                        $('#hidden-message').html("服务器升级中...此功能暂不可用.");
                    }
                    $('#hidden-message-box').show();
                }).complete(function (data) {
                    $('#hidden-message-box').show();
                });
        } catch (e) {
            $('#hidden-message-box').show();
        } finally {
            setTimeout(function () {
                $('#hidden-message-box').hide();
            }, 3000);
        }


    });
    (function ($) {
        $.fn.innerText = function (msg) {
            if (msg) {
                if (document.body.innerText) {
                    for (var i in this) {
                        this[i].innerText = msg;
                    }
                } else {
                    for (var i in this) {
                        this[i].innerHTML.replace(/&amp;lt;br&amp;gt;/gi, "n").replace(/(&amp;lt;([^&amp;gt;]+)&amp;gt;)/gi, "");
                    }
                }
                return this;
            } else {
                if (document.body.innerText) {
                    return this[0].innerText;
                } else {
                    return this[0].innerHTML.replace(/&amp;lt;br&amp;gt;/gi, "n").replace(/(&amp;lt;([^&amp;gt;]+)&amp;gt;)/gi, "");
                }
            }
        };
    })(jQuery);
    $('.save').click(function () {
        // var content = JSON.stringify(current_json);
        // $('#txt-content').val(content);
        //var text = "hell world";
        var html = $('#json-target').html().replace(/\n/g, '<br/>').replace(/\n/g, '<br>');
        var text = $('#json-target').innerText().replace('　　', '    ');
        var blob = new Blob([text], {type: "application/json;charset=utf-8"});
        var timestamp = new Date().getTime();
        saveAs(blob, "format." + timestamp + ".json");
    });
    $('.copy').click(function () {
        //$.msg("成功复制到粘贴板","color:#00D69C;");
        // $(this).tooltip('toggle')
        //       .attr('data-original-title', "复制成功！")
        //       .tooltip('fixTitle')
        //       .tooltip('toggle');
    });
    var clipboard = new Clipboard('.copy');
    $('#json-src').keyup();

    //拖拽
    var totalWidth = $(window).outerWidth();
    var forbidenWidth = totalWidth - 400;
    $('#dragEle').myDrag({
        parent:'parent', //定义拖动不能超出的外框,拖动范围
        randomPosition:false, //初始化随机位置
        direction:'x', //方向
        handler:false, //把手
        dragStart:function(x,y){
            totalWidth = $(window).outerWidth();
            forbidenWidth = totalWidth - 400;
        }, //拖动开始 x,y为当前坐标
        dragEnd:function(x,y){
            if(x>forbidenWidth){
                $('#dragEle').offset({top:0,left:forbidenWidth-5});
                $('main .col-md-5').width(forbidenWidth);
                $('main .col-md-7').width(totalWidth - forbidenWidth);
            } else if (x<200){
                $('#dragEle').offset({top:0,left:195});
                $('main .col-md-5').width(200);
                $('main .col-md-7').width(totalWidth - 200);
            } else {
                $('main .col-md-5').width(x);
                $('main .col-md-7').width(totalWidth - x);
            }
        }, //拖动停止 x,y为当前坐标
        dragMove:function(x,y){
            if(x>forbidenWidth || x<200){

            } else {
                $('main .col-md-5').width(x);
                $('main .col-md-7').width(totalWidth - x);
            }
        } //拖动进行中 x,y为当前坐标
    });
    $(window).resize(function(){
        $('#dragEle').css('left', '');
        $('main .col-md-7').css('width', '');
        $('main .col-md-5').css('width', '');
    })
</script>
<div class="cus-footer">
    <footer>
        <div class="copyright-link" style="padding-top: 6px;">
            <a href="#">本网站仅限个人使用，其他人勿入</a>
            <!--<a href="/ad.html" style="margin-right:20px;" >广告合作</a>-->
            <a href="http://www.miitbeian.gov.cn/" target="_blank">黔ICP备18008414号</a>
        </div>
        <div>©2020 i.fe80.cn All right reserved. <br/>邮箱：1198551705#qq.com</div>

        <script>
            var _hmt = _hmt || [];
            (function() {
                var hm = document.createElement("script");
                hm.src = "https://hm.baidu.com/hm.js?1d6c34c1bc067f5746a5fca18d1c24ab";
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(hm, s);
            })();
        </script>
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-85291938-3"></script>
        <script>
            window.dataLayer = window.dataLayer || [];

            function gtag() {
                dataLayer.push(arguments);
            }

            gtag('js', new Date());
            gtag('config', 'UA-85291938-3');
        </script>


    </footer>
<div class="load-gg">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- json.cn底部 -->
    <ins class="adsbygoogle"
         style="display:inline-block;width:970px;height:90px"
         data-ad-client="ca-pub-1130438465287629"
         data-ad-slot="1989361871"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>
</div>

</body>
</html>
